HTML sjabloon voor detail artikel
Het wordt tijd dat we inhoud van de bloemlezing beter rangschikken in het browservenster. We maken een sjabloon die we later ook voor gelijkaardige pagina's kunnen gebruiken. Het concept van de bloemlezing - een lijst van gedichten waaruit je er een kan kiezen door erop te klikken om de details te zien - is van toepassing op vele soorten artikels. Ik denk bijvoorbeeld aan een lijst van boeken of autos waaruit je een item kan selecteren om de details te bekijken.
Probleem
Het is een goed idee om eerst een schets te maken van de lay-out vooraleer met de CSS te beginnen. Een schets geeft de grote lijnen weer van de lay-out zonder in de details te treden van kleur, lettertype, witruimte enz.
Meer info over Wireframes en mockups.
Design
Een wireframe (draadmodel) is een vereenvoudigde weergave van een webpagina. Een wireframe kan je zien als een bouwplan voor een website, een overzicht van de verschillende onderdelen op de webpagina.
Design
Oplossing
<!doctype>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<title>Bloemlezing</title>
</head>
<body>
<header>
<nav>
</nav>
<h1>
</h1>
</header>
<article>
<aside>
<nav>
</nav>
</aside>
<section>
<header>
</header>
<p></p>
<footer>
</footer>
</section>
</article>
<footer>
</footer>
</body>
</html>
Voorbeeld
HTML
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="application-name" content="a norm apart">
<meta name="description" content="Bloemlezing nederlandstige dichters">
<meta name="keywords" content="poëzie, poetry, dutch literature, dichters, poets, Nederlandse dichters ">
<meta name="author" content="Jef Inghelbrecht">
<title>Bloemlezing</title>
</head>
<body>
<header>
<nav>
<ol>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Marsman</a></li>
</ol>
</nav>
<h1>Jef's website</h1>
</header>
<article>
<aside>
<nav>
<ol>
<li><a href="#gedicht1">De hand van de dichter</a></li>
<li><a href="#gedicht2">Voor het inslapen</a></li>
<li><a href="#gedicht3">De liefde slaapt in haar hart</a></li>
<li><a href="#gedicht4">Jaloezie</a></li>
<li><a href="#gedicht5">De vreemdeling</a></li>
<li><a href="#gedicht6">Polderland</a></li>
<li><a href="#gedicht7">Twee vrienden</a></li>
<li><a href="#gedicht8">Aan de dood</a></li>
</ol>
</nav>
</aside>
<header>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104082/jonge_Marsman.jpg"/>
<figcaption>De jonge Hendrik Marsman</figcaption>
</figure>
<h1>Bloemlezing</h1>
<h2>Hendrik Marsman</h2>
</header>
<section id="gedicht1">
<header>
<h1>De hand van de dichter</h1>
</header>
<p>
Glazen grijpen en legen;<br/>
veel jagen en reizen;<br/>
vrouwen omhelzen en strelen;<br/>
strijden op felle
paarden
<br/>
en blinkende wateren splijten;<br/>
spelen met licht en donker;<br/>
de dag en de nacht doorrijden
<br/>
onder fluweel en schaduw en<br/>
flonkrende sterrenbeelden.
</p>
<p>
het staat niet in mijn hand gegrift;<br/>
en een hand is een leven, een lot;<br/>
ik lees slechts in fijn
scherp schrift<br/>
- en dit geldt voor vroeger en later -<br/>
weinig liefde en wijn, veel water,<br/>
soms
een racket, een zweep, maar
<br/>
stellig nimmer een zwaard.<br/>
<p>
zo is mij enkel bewaard<br/>
langzaam maar vast te verwijven<br/>
in nijver monnikenwerk:<br/>
bidden en
verzen schrijven<br/>
geel op geel perkament,<br/>
en mijn hand alleen te verstrengelen<br/>
met mijn eigen
andere hand<br/>
en in een cel
te versterven<br/>
oud op een houten bank.
</p>
<footer>
<p><cite>Tempel en kruis</cite> 1940</p>
</footer>
</section>
<section id="gedicht2">
<header>
<h1>Voor het inslapen</h1>
</header>
<p>
In deze kleine kamer vind ik soms nog vrede.<br/>
al wat daarbuiten ligt heeft voor mij afgedaan;<br/>
wat
rest mij nog, dan ‘Krieg und Frieden’ lezend,<br/>
tot mijn verwoeste dromen in te gaan?
</p>
<footer>
<p><cite>Verzamelde gedichten</cite> 1941</p>
</footer>
</section>
<section id="gedicht3">
<header>
<h1>De liefde slaapt in haar hart</h1>
</header>
<p>
"De liefde slaapt in haar hart<br/>
als de lente in de winterse grond<br/>
die in koude en duisternis wacht
<br/>
als een vlinder in haar cocon.<br/>
in het dorp waar ik nu overnacht<br/>
schijnt morgen een
schuimende zon<br/>
in een hemel met palmen bevlagd!
</p>
<p>
geen regen, geen schaduw, geen sneeuw,<br/>
geen dooiende schemering<br/>
die als een zwavelen zon<br/>
in
de rafels hangt van het weer,<br/>
drijft mij terug naar het vuur<br/>
van haar kamer, haar rode haard.
</p>
<p>
sluimer, liefste, en slaap<br/>
uw eenzame winterslaap,<br/>
en ontwaak als de bevende zon<br/>
door de
lentlijke evening gaat,<br/>
als een vlinder uit haar cocon,<br/>
als het vuur in uw donkere haard."
</p>
<footer>
<p><cite>Tempel en kruis</cite> 1940</p>
</footer>
</section>
<section id="gedicht4">
<header>
<h1>Jaloezie</h1>
</header>
<p>
Laat mij de angel van 't venijn,<br/>
door argwaan in uw hart gedreven<br/>
uittrekken, en een felle pijn<br/>
de aanvang zijn van het genezen.<br/>
en laat ons langs het steil ravijn<br/>
opnieuw de oude weg betreden<br/>
die ons terugvoert naar het huis,<br/>
dat in de duisternis beneden<br/>
nog aan de voet der heuvel ligt;<br/>
waar gij zo eenzaam hebt gestreden,<br/>
toen leed de liefde had ontwricht;<br/>
laat uitgeroeid zijn het verleden<br/>
en uw gelaat weer zacht verlicht
</p>
<footer>
<p><cite>Verzamelde gedichten XI</cite> 1941</p>
</footer>
</section>
<section id="gedicht5">
<header>
<h1>De vreemdeling</h1>
</header>
<p>
Laat mij alleen.<br/>
dit is de tweesprong onzer wegen.<br/>
gij hebt mij tot de verste rand geleid.
</p>
<p>
maar keer hier om, ween niet.<br/>
gij kunt de laatste tocht naast mij niet schrijden,<br/>
noch ik met u, gij gaat hem eens alleen.
</p>
<p>
gij zijt mij nochtans onverdeeld verpand:<br/>
ik heb uw bloed de donkre kus gegeven<br/>
van hen, die boven dood en leven<br/>
ontstegen zijn. ik ben hun afgezant.
</p>
<p>ik beid uw komst.</p>
<p>
wij zullen eens de zwarten wijn<br/>
van dood en donker uit één beker drinken,<br/>
wij zullen stromend in elkaar verzinken<br/>
en eeuwig zijn.
</p>
<p>
vaarwel.<br/>
ik keer niet weer.<br/>
maar gij komt zelve, later.<br/>
vaarwel. het water<br/>
roept voor de derde keer.
</p>
<footer>
<p><cite>Verzamelde gedichten V</cite> 1941</p>
</footer>
</section>
<section id="gedicht6">
<header>
<h1>Polderland</h1>
</header>
<p>
Ik loop door ’t polderland<br/>
onder de helle regen;<br/>
oneindig is het land,<br/>
oneindig zijn de wegen,
</p>
<p>
die naar de kimmen gaan;<br/>
in lage hemelstreken<br/>
heerst tussen zwarte kreken<br/>
het mistig licht der maan.
</p>
<p>
o, dertigstroomenland,<br/>
het volk dat u bewoont<br/>
versombert in krakelen<br/>
die geld en God verdelen,<br/>
purper en doornenkroon.
</p>
<p>
oneindig is het land,<br/>
oneindig zijn de wegen<br/>
die naar de kimmen gaan;<br/>
ik loop de morgen tegen<br/>
in ’t mistig licht der maan.
</p>
<footer>
<p><cite>Verzamelde gedichten X</cite> 1941</p>
</footer>
</section>
<section id="gedicht7">
<header>
<h1>Twee vrienden</h1>
</header>
<p>
De maan maakt de nacht tot een sneeuwwit veld.<br/>
een man heeft zijn vriend van zijn leven verteld:
</p>
<p>
er is door dit spreken een wonder gebeurd:<br/>
hun harten zijn zozeer eender gekleurd
</p>
<p>
dat de een als hij soms naar de ander ziet<br/>
bij zichzelve zegt: maar ben ìk dat niet?
</p>
<p>
een vrouw; nog een vrouw; een verterend gemis.<br/>
het is alsof alles ten einde is:
</p>
<p>
want één hart blijft thuis en één hart gaat op reis<br/>
maar geen van twee vindt het Paradijs.
</p>
<footer>
<p><cite>Verzamelde gedicten VI</cite> 1941</p>
</footer>
</section>
<section id="gedicht8">
<header>
<h1>Aan de dood</h1>
</header>
<p>Dood</p>
<p>
neem mij mee.<br/>
ik heb hier afgedaan.<br/>
ik wil op de rotsen te pletter slaan<br/>
en versplintren in
open zee...<br/>
neem mij mee,<br/>
dood.
</p>
<footer>
<p><cite>Porta Nigra</cite> 1934</p>
</footer>
</section>
<footer>
<address>
Samengesteld door Jef Inghelbrecht
</address>
</footer>
</article>
<footer>
<p>concept & design - Modern Ways 2012-2016</p>
<div>
<h3>Contact</h3>
<address>Modern Ways</address>
</div>
</footer>
</body>
</html>
| html element | height | width | ouder-element |
| html | 100% | 100% | browservenster |
| body | 100% | 100% | van html |
| header pagina | 12% | 10% | van body |
| article | 88% | 90% | van body |
| footer pagina | 17% | 100% | van body |
| aside | 88% | 25% | van article |
| aside nav | 100% | 100% | van aside |
| section en header article | 88% | 75% | van article |
2019-02-27 20:48:26